<template>
<div>
    <div class="header">
        <van-icon name="arrow-left" @click="back"/>
        <span>小米之家</span>
    </div>
    <div class="info">
        <van-image :src="item.detail_img_url" />
        <ul>
            <!-- <li>
                <div></div>
                <div class="title">{{item.store_name}}</div>
            </li>
            <li>
                <div></div>
                <div class="time">

                </div>
            </li>
            <li>
phone-o
                <div class="address">
                    <p>地址</p>
                    <p class="text">{{item.address}}</p>
                </div>
            </li>
            <li>
                <div>{{item.support_service}}</div>
            </li> -->
            <li>
                <div class="icon"><van-icon name="wap-home-o" color="#ccc"/></div>
                <div class="des">
                    <p>{{item.store_name}}</p>
                </div>
            </li>
            <li>
                <div class="icon"><van-icon name="clock-o" color="#ccc"/></div>
                <div class="time">
                    <span>营业时间</span>
                    <span class="text">{{item.shop_time}}</span>
                </div>
            </li>
            <li>
                <div class="icon"><van-icon name="location-o" color="#ccc"/></div>
                <div class="addres">
                    <span>地址</span>
                    <span class="text">{{item.address}}</span>
                </div>
            </li>
            <li>
                <div class="icon"><van-icon name="phone-o" color="#ccc"/></div>
                <div class="tel">
                    <span>电话</span>
                    <span class="text">{{item.tel}}</span>
                </div>
            </li>
            <li>
                <div class="icon"><van-icon name="like-o" color="#ccc"/></div>
                <div class="reserve" >
                    <span>支持服务</span>
                    <span class="text" >{{reserve}}</span>
                </div>
            </li>
        </ul>
    </div>
    <common-footer></common-footer>
</div>
</template>
<script>
export default {
  props: ['item'],
  data () {
    return {
      reserve: ''
    }
  },
  mounted () {
    this.reserve = this.item.support_service.join('、')
  },
  methods: {
    back () {
      window.history.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.header{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    align-items: center;
    height: 50px;
    line-height: 50px;
    background: #f2f2f2;
    color: #666;
    display: fixed;
    margin-bottom: 10px;
    span{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}
.info{
    background-color: #fff;
    margin-top: 60px;
    .van-image{
        width: 350px;
        height: 216px;
        margin: 0 12px 10px 12px;
    }
    li{
        list-style: none;
        height: 70px;
        // line-height: 60px;
        margin: 0 12px;
        border-bottom: 1px solid #f6f6f6;
        // border-bottom: 1px solid #000;
        display: flex;
        justify-content: flex-start;
        .icon{
            width: 40px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            .van-icon{
               font-size: 20px
            }
        }
        .des{
            margin-left: 10px;
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .time,.addres,.tel,.reserve{
            margin-left: 10px;
            width: 100%;
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .text{
                margin-top: 10px;
                font-size: 12px;
                color: rgba(60,60,60,.87);
            }
        }
    }
}
</style>
